<template>
  <div class="app-container" style="background-color:#ecf0f5 !important">
    <!-- v-permission="['airStatistics:airStatisticsQuarter:read']" -->
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="background-color:#ecf0f5 !important">
      <el-date-picker
        v-model="year"
        type="year"
        clearable
        class="filter-item"
        placeholder="选择年"
        style="width:204px"
      />
      <el-select
        v-model="quarter"
        clearable
        filterable
        class="filter-item"
        placeholder="请选择季度"
      >
        <el-option
          v-for="(key, value) in siteTypeMap"
          :key="key"
          :label="key"
          :value="value"
        />
      </el-select>
     <span v-if="this.$store.state.user.fsiteLevel == '0'">
        <el-select
          clearable
          filterable
          @change="cityChange"
          class="filter-item"
          v-model="cityValue"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '1'">
          <el-select
          disabled
          clearable
          filterable
          @change="cityChange"
          class="filter-item"
          v-model="cityValue"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '2'">
          <el-select
          disabled
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '3'">
        <el-select
           disabled
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
      <el-select
        clearable
        filterable
        class="filter-item"
        v-model="placeValue"
        placeholder="请选择地点"
      >
        <el-option
          v-for="item in placeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        :style="{background:buttonColor.lookup,color:buttonColor.color}"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
    </div>
    <div class="list">
      <div class="uni-flex uni-row" style="min-height: 2rem">
        <div class="text1Title">指标</div>
        <div class="text2Title">天数</div>
        <div class="text2Title">占比%</div>
        <div class="text2Title">环比天数</div>
        <div class="text2Title">环比%</div>
        <div class="text2Title">同比天数</div>
        <div class="text2Title">同比%</div>
      </div>
      <div
        v-for="(item) in dataList"
        :key="item.fsiteNo"
        class="uni-flex uni-row on"
      >
        <div class="text1" v-if="item.faqiName==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.faqiName  }}</el-tag> </div>
        <div class="text1" v-else-if="item.faqiName==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.faqiName  }}</el-tag></div>
        <div class="text1" v-else-if="item.faqiName==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.faqiName  }}</el-tag></div>
        <div class="text1" v-else-if="item.faqiName==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.faqiName  }}</el-tag></div>
        <div class="text1" v-else-if="item.faqiName==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.faqiName  }}</el-tag></div>
        <div class="text1" v-else-if="item.faqiName==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.faqiName  }}</el-tag></div>
        <div class="text1" v-else>{{ item.faqiName  }}</div>
        <div class="text2">{{ item.faqiDay }}</div>
        <div class="text2">{{ item.faqiRate }}</div>
        <div class="text2">{{ item.fhbDay }}</div>
        <div class="text2">{{ item.fhbRate }}</div>
        <div class="text2">{{ item.ftbDay }}</div>
        <div class="text2">{{ item.ftbRate }}</div>
      </div>
    </div>

    <div>
      <div id="myChartBarairStatisticsQuarter" :style="{width: '100%', height: '250px',backgroundColor:'#fff'}" />
    </div>

    <div>
      <div id="myChartairStatisticsQuarter" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {buttonColor} from '@/filters/index'
import {
  fsiteOptionsByLevel,
  fsiteOptionsByFsiteNo,
  getListArea,
} from "@/api/area";

const siteTypeMap = {
  1: "第一季度",
  2: "第二季度",
  3: "第三季度",
  4: "第四季度",
};
var urlStr = "";

export default {
  name: "Area",
  data() {
    return {
      buttonColor:buttonColor,
      year: new Date(),
      quarter: this.getQuarter(),
      dataList: null,
      listQuery: {
        date: undefined,
        quarter: undefined,
        fsiteNo: undefined,
      },
      provinceValue: null,
      cityOptions: null,
      cityValue: "",
      areaOptions: null,
      areaValue: "",
      schoolOptions: null,
      schoolValue: "",
      placeOptions: null,
      placeValue: "",
      siteTypeMap,
    };
  },
  computed: {
    yearMonth() {
      var date = new Date(this.year);
      var y = date.getFullYear();
      return y;
    },
  },
  created() {
   if(this.$store.state.user.fsiteLevel==0){
        // 获取省
      fsiteOptionsByLevel(0)
        .then((response) => {
          if (response.data.data.list.length > 0) {
            this.provinceValue = response.data.data.list[0].value;
            this.handleFilter();
          }
        })
        .catch(() => {
          this.provinceValue = null;
        });
      // 获取市
      fsiteOptionsByLevel(1)
        .then((response) => {
          this.cityOptions = response.data.data.list;
        })
        .catch(() => {
          this.cityOptions = [];
        });

    }else if(this.$store.state.user.fsiteLevel == 1){
      this.cityOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.cityValue = this.$store.state.user.fsiteNo
      this.cityChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }else if(this.$store.state.user.fsiteLevel == 2){
      this.areaOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.areaValue = this.$store.state.user.fsiteNo
      this.areaChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }else if(this.$store.state.user.fsiteLevel == 3){
      this.schoolOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.schoolValue = this.$store.state.user.fsiteNo
      this.schoolChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }
  },
  methods: {
    getQuarter: function () {
      var date = new Date();
      var m = date.getMonth() + 1;
      if(m<=3){
        return '1'
      }else if(m<=6){
        return '2'
      }else if(m<=9){
        return '3'
      }else if(m<=12){
        return '4'
      }
    },
    // 市改变
    cityChange(data) {
      this.areaValue = "";
      this.schoolValue = "";
      this.placeValue = "";
      this.areaOptions = [];
      this.schoolOptions = [];
      this.placeOptions = [];
      if (data) {
        // 获取区
        fsiteOptionsByFsiteNo(data)
          .then((response) => {
            console.log(6789);
            console.log(response);
            this.areaOptions = response.data.data.list;
          })
          .catch(() => {
            this.areaOptions = [];
          });
      }
    },

    //区改变
    areaChange(data) {
      this.schoolValue = "";
      this.placeValue = "";
      this.schoolOptions = [];
      this.placeOptions = [];
      if (data) {
        // 获取学校
        fsiteOptionsByFsiteNo(data)
          .then((response) => {
            this.schoolOptions = response.data.data.list;
          })
          .catch(() => {
            this.schoolOptions = [];
          });
      }
    },

    //学校改变
    schoolChange(data) {
      this.placeValue = "";
      this.placeOptions = [];
      if (data) {
        // 获取地点
        getListArea({flag:11,arg1:data})
          .then((response) => {
            this.placeOptions = response.data.data.list;
          })
          .catch(() => {
            this.placeOptions = [];
          });
      }
    },

    handleFilter: function () {
      this.listQuery.date = this.yearMonth;
      this.listQuery.quarter = this.quarter;

      if (this.placeValue) {
        this.listQuery.fsiteNo = this.placeValue;
      } else if (this.schoolValue) {
        this.listQuery.fsiteNo = this.schoolValue;
      } else if (this.areaValue) {
        this.listQuery.fsiteNo = this.areaValue;
      } else if (this.cityValue) {
        this.listQuery.fsiteNo = this.cityValue;
      } else {
        this.listQuery.fsiteNo = this.provinceValue;
      }

      if (this.placeValue) {
        urlStr = "/report/getQuarterStatisticsDataByFpointNo";
      } else {
        urlStr = "/report/getQuarterStatisticsDataByFsiteNo";
      }

      listAir(this.listQuery)
        .then((response) => {
          this.dataList = response.data.data.list;
          if (this.dataList) {
            const barDatas = [];
            const faqi1 = [];
            const faqi2 = [];
            const faqi3 = [];
            const datas = this.dataList.map(function (item) {
              faqi1.push(item.faqiDay);
              faqi2.push(item.ftbDay);
              faqi3.push(item.fhbDay);
              return {
                name: item.faqiName,
                value: item.faqiDay,
              };
            });
            barDatas.push({
              name: "今年",
              type: "bar",
              data: faqi1,
              backgroundStyle: {
                color: "#4472C5",
              },
              label: {
                show: true,
                position: 'inside'
            },
            });
            barDatas.push({
              name: "同比",
              type: "bar",
              data: faqi2,
              backgroundStyle: {
                color: "#80FF80",
              },
              label: {
                show: true,
                position: 'inside'
            },
            });
            barDatas.push({
              name: "环比",
              type: "bar",
              data: faqi3,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
              label: {
                show: true,
                position: 'inside'
            },
            });
            this.showChartPie(datas);
            this.showChartBar(datas, barDatas);
          }
        })
        .catch(() => {
          this.dataList = [];
        });
    },
    showChartPie(datas) {
      const legend = datas.map(function (item) {
        return item.name;
      });

      // 基于准备好的dom，初始化echarts实例
      const myChartairStatisticsQuarter = this.$echarts.init(document.getElementById("myChartairStatisticsQuarter"));
      // 绘制图表
      myChartairStatisticsQuarter.setOption({
        legend: {
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: legend,
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
        },
        tooltip: {
        trigger: 'item'
          },
        series: {
          name: "图表",
          type: "pie",
          data: datas,
          itemStyle: {
            normal: {
              color: function (params) {
                if (params.data.name === "优") {
                  return "#00e400";
                }else if (params.data.name === "良") {
                  return "#f4f410";
                } else if (params.data.name === "轻度") {
                  return "#ff7e00";
                } else if (params.data.name === "中度") {
                  return "red";
                } else if (params.data.name === "重度") {
                  return "#99004c";
                } else if (params.data.name === "严重") {
                  return "#7e0023";
                }
              },
            },
          },
          label: {
            normal: {
              show: true,
              formatter: "{d} %",
            },
          },
        },
      });
    },

    showChartBar(datas, barDatas) {
      const legend = datas.map(function (item) {
        return item.name;
      });

      // 基于准备好的dom，初始化echarts实例
      const myChartBarairStatisticsQuarter = this.$echarts.init(
        document.getElementById("myChartBarairStatisticsQuarter")
      );
      // 绘制图表
      myChartBarairStatisticsQuarter.setOption({
        color: ["#1E90FF", "#3CB371", "#EEB422"],
        legend: {
          orient: "vertical",
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          data: ["今年", "同比", "环比"],
        },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
        xAxis: {
          type: "category",
          data: legend,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: barDatas,
      });
    },
  },
};
export function listAir(query) {
  return request({
    url: urlStr,
    method: "get",
    params: query,
  });
}
</script>

<style scoped>
.tagStyle{
  border-radius:10px;
  width:60px;
  font-size:15px;
  color: #fff;
  font-weight: 900;
}

.text1Title {
    width: 600px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }

  .text2Title {
    width: 350px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }
  .text1 {
    width: 600px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }
  .on {
    background: #fff;
  }

  .list {
    background-color:#ecf0f5 !important;
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 30%;
    flex: 2;
    text-align: left;
  }
.uni-row {
  flex-direction: row;
}
.uni-flex {
  display: flex;
  flex-direction: row;
}
div:hover{
    background-color: #f4f4f4;
  }
</style>
